<template>
  <div class="dswd-header">
    <div v-if="device === 'desktop'" class="dswd-main-header scrolled-down">
      <div class="dswd-header-container">
        <div class="dswd-menu-row">
          <div class="dswd-logo">
            <img src="../../assets/image/header/d-logo.png" alt="dswd-d-logo">
          </div>
          <template v-if="activePath === '/showResults.html'">
            <div class="dswd-menu-content results">
              成果展示
            </div>
          </template>
          <template v-else>
            <div class="dswd-menu-content clearfix">
              <nav>
                <Menu
                  :menu-data="menuData"
                  :active-path.sync="activePath"
                  @menuChange="menuChange"
                />
              </nav>
            </div>
            <div class="dswd-header-login-button" @click="toTransBIM">
              产品入口
            </div>
          </template>
        </div>
      </div>
    </div>
    <div
      v-if="device === 'mobile' || device === 'ipad'"
      class="dswd-main-header"
    >
      <div class="dswd-m-header-container">
        <div class="dswd-m-menu-row">
          <div class="dswd-m-logo">
            <img src="../../assets/image/header/m-logo.png" alt="dswd-m-logo">
          </div>
          <template v-if="activePath === '/showResults.html'">
            <div class="dswd-m-menu-right results">
              成果展示
            </div>
          </template>
          <template v-else>
            <div class="dswd-m-menu-right">
              <div class="dswd-m-header-login-button" @click="toTransBIM">
                产品入口
              </div>
              <div class="dswd-m-menu-switch" @click="menuVisible = true">
                <img
                  src="../../assets/image/header/menu-more.png"
                  alt="menu-more"
                >
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="menuVisible"
      :show-close="false"
      fullscreen
      append-to-body
      custom-class="menu-dialog"
    >
      <div slot="title">
        <div class="menu-header">
          <div class="dswd-menu-logo">
            <img
              src="../../assets/image/header/m-logo.png"
              alt="dswd-menu-logo"
            >
          </div>
          <div class="menu-close-icon" @click="menuVisible = false">
            <img
              src="../../assets/image/header/m-close.png"
              alt="dswd-menu-close"
            >
          </div>
        </div>
      </div>
      <nav>
        <Mobilemenu
          :active-path.sync="activePath"
          :menu-data="menuData"
          @menuChange="menuChange"
        />
      </nav>
    </el-dialog>
  </div>
</template>

<script>
import global from '@/utils/global'
import Menu from '@/components/Menu/menu'
import Mobilemenu from '@/components/Menu/mobilemenu'
import { mapState } from 'vuex'
export default {
  name: 'Header',
  components: {
    Menu,
    Mobilemenu
  },
  data() {
    return {
      userInfo: {},
      activePath: '/',
      menuVisible: false,
      menuData: [
        {
          id: '1',
          pid: '0',
          name: '首页',
          path: '/'
        },
        {
          id: '2',
          pid: '0',
          name: 'TransBIM',
          path: '/TransBIM.html'
        },
        {
          id: '3',
          pid: '0',
          name: '关于我们',
          path: '/aboutUs.html'
        },
        {
          id: '4',
          pid: '0',
          name: '新闻动态',
          path: '/news.html'
        },
        {
          id: '5',
          pid: '0',
          name: '加入我们',
          path: '/joinUs.html'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  beforeMount() {
    if (
      sessionStorage.getItem('userInfo') !== undefined &&
      sessionStorage.getItem('userInfo') !== null
    ) {
      this.userInfo = Object.assign(
        {},
        JSON.parse(sessionStorage.getItem('userInfo'))
      )
    }
  },
  mounted() {
    this.getRootPath()
  },
  methods: {
    getRootPath() {
      const url = window.location.href
      const rootPath = url.substring(url.lastIndexOf('/'), url.length)
      this.activePath = rootPath
    },
    menuChange(item) {
      this.menuVisible = false
      window.open(item.path, '_self')
    },
    login() {
      window.open('/login.html', '_self')
    },
    toWeb() {
      const win = window.open(global.yunUrl + '/?pageSource=PORTAL')
      const receiveMessage = (e) => {
        // 收到变化，判断是否事子页面
        if (e.data.type === 'PORTAL') {
        // 收到子页面传参，处理数据，向子页面传参
        // 不能把win.postMessage写到window.addEventListener外面，切记切记！！！！
          win.postMessage({ type: 'official', token: sessionStorage.getItem('token'), userInfo: sessionStorage.getItem('userInfo') }, '*')
          window.removeEventListener('message', receiveMessage, false)
        }
      }
      window.addEventListener('message', receiveMessage, false)
    },
    toTransBIM() {
      window.open(global.yunUrl + '/login', '_self')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/header/index.scss";
.scrolled-down {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.menu-header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .dswd-menu-logo {
    width: 113px;
    img {
      width: 100%;
      vertical-align: middle;
    }
  }
  .menu-close-icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
}
:deep(.menu-dialog) {
  .el-dialog__header {
    padding: 0 18px;
  }
}
</style>
